<template>
  <div class="section-wrap">
    <div class="form-section" v-if="listArr != {} ">
      <div class="form-item-p">
        <div>
          <label>违章描述</label><span @click="flag=!flag">{{flag ? "展开":"收缩"}}</span>
          <p :class='flag ? "overWord":""' style="line-height: 30px;" >
            {{listArr.Description}}
          </p>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>违章时间</label>
        </div>
        <group>
          <div>
            <input type="text" disabled
                   v-model="listArr.HappendDate">
          </div>
        </group>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>违章类型</label>
        </div>
        <group>
          <div>
            <input type="text" disabled
                   v-model="listArr.BrokenRuleType">
          </div>
        </group>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>违章区域</label>
        </div>
        <group>
          <div>
            <input type="text" disabled
                   v-model="listArr.BreakArea">
          </div>
        </group>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>违章单位</label>
        </div>
        <group>
          <div>
            <input type="text" disabled
                   v-model="listArr.BrokenDeptName">
          </div>
        </group>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>违章班组</label>
        </div>
        <group>
          <div>
            <input type="text" disabled
                   value="xx班组">
          </div>
        </group>
      </div>
      <myMenu></myMenu>
    </div>
  </div>
</template>
<script type="text/javascript">
  import {breakDetail} from '@/api/api'
  import myMenu from '@/commonComponents/menu'

  export default {
    data () {
      return {
        flag: true,
        listArr: {},
        param: {
          allowPaging: true,
          data: 'c4a59478-1bd7-4b55-bebd-37201ed4c84a',
          pageIndex: 0,
          pageSize: 1000
        }
      }
    },
    components: {
      myMenu
    },
    created () {
      this.param.data = this.$route.query.id
    },
    mounted () {
      this.dataArr()
    },
    methods: {
      // 主要数据
      dataArr () {
        breakDetail(this.param).then((res) => {
          console.log(res, 123)
          if (res.code === 0) {
            this.listArr = res.data
          }
        })
      }
    }
  }
</script>
<style lang="less" scoped>
  @import '~vux/src/styles/1px.less';
  @import '~vux/src/styles/center.less';

  .form-section {
    .form-item-p {
      line-height:55px;
      width: 100%;
      border-bottom: 1px solid #f0f0f2;
      margin-left: 20px;
      padding-right:20px;
      font-size: 14px;
      color: #666;
      font-weight: 800;
      label{
         font-size:14px;
         color:#666;
         font-weight: bold
      }
      span{
        font-weight: 100;
        float:right;
        padding-right: 10px;
        color:#6a6a6a ;
      }
      > p{
        width: 100%;
        line-height: 23px;
        color: #696969;
        margin-bottom: 20px;
      }
      p.overWord{
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
    }
  }
</style>
